import React from 'react';
import { Upload, Icon, Modal } from 'choerodon-ui';
import { UploadChangeParam } from 'choerodon-ui/lib/upload';

interface UploadAvatarProps {}

class UploadAvatar extends React.Component<UploadAvatarProps, any> {
  constructor(props: UploadAvatarProps) {
    super(props);
    this.state = {
      previewImage: '',
      previewVisible: false,
      fileList: [],
    };
  }

  render() {
    const { previewImage, previewVisible, fileList } = this.state;
    const handlePreview = (file: any) => {
      this.setState({
        previewVisible: true,
        previewImage: file.url || file.thumbUrl,
      });
    };
    const handleChange = ({ fileList: list }: UploadChangeParam) => {
      this.setState({ fileList: list });
    };
    const uploadButton = (
      <div>
        <Icon type="add" />
        <div className="c7n-upload-text">Upload</div>
      </div>
    );
    const handleCancel = () => {
      this.setState({
        previewVisible: false,
      });
    };
    return (
      <div className="clearfix">
        <Upload
          action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
          listType="picture-card"
          fileList={fileList}
          onPreview={handlePreview}
          onChange={handleChange}
        >
          {fileList.length >= 1 ? null : uploadButton}
        </Upload>
        <Modal visible={previewVisible} footer={null} onCancel={handleCancel}>
          <img alt="example" style={{ width: '100%' }} src={previewImage} />
        </Modal>
      </div>
    );
  }
}

export default UploadAvatar;
